<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
    <head>        
        <!-- META SECTION -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <!-- END META SECTION -->
        
        <!-- CSS INCLUDE -->        
        <link rel="stylesheet" href="${ctx}/rs/css/bootstrap-table.css" />
        <link rel="stylesheet" href="${ctx}/rs/css/main.css" />
        <link id="theme" rel="stylesheet" href="${ctx}/rs/joli/css/theme-default.css" />
        <!-- EOF CSS INCLUDE -->       
        <style type="text/css">
        	#m-info {
				position: absolute;
				top: 0;left: 0;
				/*background-color: rgba(0,0,0,.7);*/
				width: 350px;height: 400px;
				/*color: #fff;
				padding:10px;
				font-size: 12px;*/
				display: none;
			}
			#m-info img { width:100%;}
        </style>                             
    </head>
<body>
	
	<!-- START PAGE CONTAINER -->
        <div class="page-container">
        	<!-- 引入左菜单部分 -->
            <jsp:include page="../joli/menu.jsp"></jsp:include>
            
            <!-- START PAGE CONTENT -->
            <div class="page-content">
                
                <jsp:include page="../joli/top.jsp"></jsp:include>
                
                <!-- START BREADCRUMB -->
                <ul class="breadcrumb">
                    <li><a href="#">充值管理</a></li>                    
                    <li class="active">充值记录</li>
                </ul>
                <!-- END BREADCRUMB -->   
                
                
                <!-- PAGE CONTENT WRAPPER -->
                <div class="page-content-wrap">
                	<div class="row">
                		<div class="col-xs-12">
                			<div id="toolbar">
								<div class="fr pb10">
								状态&nbsp;:<select class="srt-put1 mr10 widput1" id="selectStatus" onchange="refresh()">
									<option value="-1">全部</option>
									<option value="0">待处理</option>
									<option value="1">失败</option>
									<option value="2">充值成功</option>
									<option value="3">待还现</option>
									<option value="4">逾期</option>
								</select>
								 账号：
								  <input type="text" class="srt-put1 mr10 widput1" id="email" name="email"/>
								  客户名称：
								  <input type="text" class="srt-put1 mr10 widput1" id="username" name="username"/>
								     联系人：
								  <input type="text" class="srt-put1 mr10 widput1" id="linkman" name="linkman"/>
								     联系电话：
								  <input type="text" class="srt-put1 mr10 widput1" id="telphone" name="telphone"/>
								  
								  <button class="btn btn-primary btn-sm srt-btn active" onclick="refresh()">搜索</button>
							    </div>
							</div>
							
							<table id="table" cellpadding="0" cellspacing="0" data-toggle="table" data-toolbar="#toolbar"
								data-url="${ctx}/account/recordList.htm"
								data-cache="false"
								data-pagination="true" 
								data-side-pagination="server"
								data-page-list="[10, 20, 50, 100]"
								data-page-size="20"  
								data-query-params="queryParams">
								<thead>
									<tr class="tab-th">
										<!-- <th data-field="state" data-checkbox="true"></th> -->
										<th data-field="id" hidden="hidden">编号</th>
										<th data-field="showValue" >客户类型</th>
										<th data-field="username" >客户名称</th>
										<th data-field="emailurl" >账号</th>
										<th data-field="account" >充值金额(元)</th>
										<th data-field="repay_time" data-formatter="timeDateFormatter">还现期限</th>
										<th data-field="pay_time" data-formatter="timeFormatter">充值日期</th>
										<th data-field="remit_time" data-formatter="timeDateFormatter">汇款日期</th>
										<th data-field="apply_time" data-formatter="timeFormatter">申请时间</th>
										<th data-field="status" data-formatter="statusFormatter">状态</th>
										<th data-field="action" data-formatter="actionFormatter" class="col-md-2">操作</th>
									</tr>
								</thead>
							</table>
                		</div>
             		</div>
            	</div>
		</div>
		<div id="m-info"></div>
	<div class="modal fade" id="modal1" role="dialog" aria-labelledby="gridSystemModalLabel" data-backdrop="static" >
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">不予充值</h4>
	      </div>
	      <div class="modal-body">
	      <form  class="form-horizontal">
	         <div class="form-group">
	            <label for="recipient-name" class="control-label col-sm-2">备注</label>
	            <div class="col-sm-10"><textarea class="form-control reason" row = 3 style="width:300px;"></textarea></div>
	          </div>
	        </form>  
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-success btnAjax">提交并发送通知</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	
	<div class="modal fade" id="modal2" role="dialog" aria-labelledby="gridSystemModalLabel" data-backdrop="static" >
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">充值操作</h4>
	      </div>
	      <div class="modal-body">
	      <form  class="form-horizontal">
	         <div class="form-group">
	            <div class="col-sm-10">
					充值金额<input type="text" id="account" name="account"  disabled="true"/>
				</div>
				<div class="col-sm-10">
					充值类型<input type="radio" id="radiotype" name="radiotype" onclick="unable()" value="1" checked="checked">现金&nbsp;&nbsp;<input type="radio" id="radiotype" name="radiotype" onclick="enable()" value="2">透现
				</div>
				<div class="col-sm-10">
					还现期限<input type="text" class="Wdate search-query w04 startTime" id="repay_date" name="repay_date" onFocus="WdatePicker({skin:'twoer',dateFmt:'yyyy-MM-dd'})" disabled="true"/>
					<!-- <input type="text" id="repay_date" name="repay_date"  disabled="true"> -->
				</div>
	          </div>
	        </form>  
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-success btnAjax">充值并发送通知</button>
	      </div>
	    </div>
	  </div>
	</div>
	<div class="modal fade" id="modal4" role="dialog" aria-labelledby="gridSystemModalLabel" data-backdrop="static" >
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">还现</h4>
	      </div>
	      <div class="modal-body">
	      <form  class="form-horizontal">
	            <div class="form-group">
	               <div class="col-sm-10">
	                <label for="name" class="col-sm-2 control-label item wid1">帐号</label>
					<div class="col-sm-6 wid2">
						<input type="text" id="repay_account" name="repay_account"  />
						<span class="help-block" id="valierr"style="color: #FF9966">*</span>
		           </div>				
				</div>
				</div>
				 <div class="form-group">
				<div class="col-sm-10">
			     	<label for="name" class="col-sm-2 control-label item wid1">户名</label>
						<div class="col-sm-6 wid2">
						<input type="text" id="repay_name" name="repay_name"  />
						<span class="help-block" id="valierr"style="color: #FF9966">*</span>
						</div>
				</div>
				</div>
				<div class="form-group">
					<div class="col-sm-10">
					<label for="name" class="col-sm-2 control-label item wid1">银行类型</label>
						 <div class="col-sm-6 wid2">
						<input type="text"  id="repay_bank" name="repay_bank" />
						<span class="help-block" id="valierr"style="color: #FF9966">*</span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-10">
					   <label for="name" class="col-sm-2 control-label item wid1">开户行</label>
						<div class="col-sm-6 wid2">
						<input type="text"  id="repay_bank_name" name="repay_bank_name" />
						<span class="help-block" id="valierr"style="color: #FF9966">*</span>
						</div>	<!-- <input type="text" id="repay_date" name="repay_date"  disabled="true"> -->
					</div>
				</div>
				<div class="form-group">
				    <div class="col-sm-10">
					    <label for="name" class="col-sm-2 control-label item wid1">回单编号</label>
					    <div class="col-sm-6 wid2">
						<input type="text"  id="repay_serial" name="repay_serial" />
						<span class="help-block" id="valierr"style="color: #FF9966">*</span>
							<!-- <input type="text" id="repay_date" name="repay_date"  disabled="true"> -->
						</div>
				    </div>
	          </div>
	        </form>  
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-success btnAjax">确定还现</button>
	      </div>
	    </div>
	  </div>
	</div>

	<!-- 引入所有joli的脚本 -->
	<jsp:include page="../joli/scripts.jsp"></jsp:include>
	<!-- 引入页面需要的脚本 -->
	<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table-zh-CN.js"></script>
	<script src="${ctx}/rs/js/jquery.formatDate.js"></script>
	<%-- <script src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script> --%>
	<script language="javascript" type="text/javascript" src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/rs/js/session-out-error.js"></script>
	<script>
	
	  activeMenu($("#menu_account_1"));
	  var $table = $('#table');
      
      $table.on('click-row.bs.table', function (e, row, $element) {
	    	$table.bootstrapTable('uncheckAll');
	    	$table.bootstrapTable('check', $element.index());
      });
      
      $table.bootstrapTable({
          height: getHeight()
      });
	    
      //获取分辨率高度
	    function getHeight() {
	        return window.screen.height - 308;
	    }
	    
	    $(window).resize(function () {
      	$table.bootstrapTable('resetView',{height: getHeight()});
      });
	    
	    //初始化刷新
	     function refresh(pageIndex,selectPage){
	    	 var linkman = $("#linkman").val();
	    	 var telphone = $("#telphone").val();
		     var email = $("#email").val();
		     var username = $("#username").val();
		     var selectStatus = $("#selectStatus").val();
	    	if(!pageIndex && !selectPage){
	    		pageIndex = 0;
	    		selectPage = 0;
	    	}
			var pageSize = $table.bootstrapTable('getOptions').pageSize;
			pageIndex=pageIndex*pageSize;
	    	$table.bootstrapTable('refresh', {
	    		silent: true,
	    		cache : false, 
	    		url: '${ctx}/account/recordList.htm',
	    		contentType:'application/x-www-form-urlencoded; charset=UTF-8',
                query: {
                	telphone : telphone,
                	email :email,
   					pageIndex : pageIndex,
   					pageSize : pageSize,
   					username : encodeURI(username),
 	   				linkman : encodeURI(linkman),
 	   				status:selectStatus
   				}
           });
	    	$table.bootstrapTable('selectPage', selectPage);
	    }
	    
	     function ToRole(value, row, index){
	    	 var roleName ="";
	    	 switch (value){
	    	 case 4:
	    		 roleName = "<span class='label label-info'>媒体主</span>";
	    		 break;
	    	 case 5:
	    		 roleName = "<span class='label label-danger'>广告主</span>";
	    		 break;
	    	 }
				return roleName;
			}
	    
		function reject(id,status){
				  $("#modal1").modal("show");
				  $(".btnAjax").on('click',function(){
					  var reason = $(".reason").val();
					  if(!reason){
			                alert("请填写不通过理由！");
			                return;
			            }if(reason.length>500){
			                alert("理由不能超过500字！");
			                return;
			            	
			            }
					  $.ajax({
		             	   url: "${ctx}/account/reject.htm", 
		             	  type: 'POST',
		                  data: {
		                	  id:id,
		                	  status:1,
		                	  reason:reason
		                  },
		                    success: function (text) {
		                    	bootstrapQ.msg({
		 						    msg  : '操作成功！',
		 						    type : 'success',
		 						    time : 2000
		 						});
		                    	setTimeout("window.location.reload(true)",2000);
		                    },
		                    error: function () {
		                    	bootstrapQ.msg({
		 						    msg  : '操作失败！',
		 						    type : 'danger',
		 						    time : 2000
		 						});
		                    	setTimeout("window.location.reload(true)",1000);
		                    } 
		             }); 
				  })
			
		}
		
		function operate(id,accounts){
			$("#account").val(accounts);
			  $("#modal2").modal("show");
			  $(".btnAjax").on('click',function(){
				  var paytype="现金";
				  var radiotype = $("input[name='radiotype']:checked").val();
				  var repay_date = $("#repay_date").val();
				  if(radiotype==2){
		                if(!repay_date){
		                	 alert("请填写还现期限!");
				             return;
		                }
		                paytype = "透现";
		            }
				  $.ajax({
	             	   url: "${ctx}/account/pay.htm", 
	             	  type: 'POST',
	                  data: {
	                	  id:id,
	                	  status:3,
	                	  paytype:paytype,
	                	  repay_date:repay_date,
	                	  accounts:accounts
	                  },
	                    success: function (text) {
	                    	bootstrapQ.msg({
	 						    msg  : '操作成功！',
	 						    type : 'success',
	 						    time : 2000
	 						});
	                    	setTimeout("window.location.reload(true)",2000);
	                    },
	                    error: function () {
	                    	bootstrapQ.msg({
	 						    msg  : '操作失败！',
	 						    type : 'danger',
	 						    time : 2000
	 						});
	                    	setTimeout("window.location.reload(true)",1000);
	                    } 
	             }); 
			  })
		
	}
		
		function detail(id) {
				bootstrapQ.dialog({
					url : "${ctx}/account/detail.htm?id="+ id,
					title : "充值详情",
					width: '720px',
					close : 'true',
					hidebtn : 'true'
				},function(){
					//回调触发关闭窗口
					$("#bsmodal").modal("hide");
				});
        }
		
		function detail_false(id) {
			bootstrapQ.dialog({
				url : "${ctx}/account/detail_false.htm?id="+ id,
				title : "充值详情",
				width: '720px',
				close : 'true',
				hidebtn : 'true'
			},function(){
				//回调触发关闭窗口
				$("#bsmodal").modal("hide");
			});
    }
		
		
		function logoFormatter(value, row, index) {
			if (value == ''||value==null) {
				return "无图片";
			} else {
				return '<image src="'+value+'" style="width:50px;height:50px;"/>';
			}
		}
		
	    function queryParams(params) {
			return {
				pageIndex : params.offset,
				pageSize : params.limit
			};
		}
		
	    function timeDateFormatter(value, row, index){
			 if(value){
				 return $.formatDate("yyyy-MM-dd", new Date(value));
			 }
			 return "--";
		}
	    
		function timeFormatter(value, row, index){
			 if(value){
				 return $.formatDate("yyyy-MM-dd HH:mm:ss", new Date(value));
			 }
			 return "--";
		}
		
		function actionFormatter(value, row, index){
	 		var retbak="";
	 		switch(row.status){
	 		case 1:
	 			retbak='<a class="mr15" href="javascript:detail_false('+row.id+')">详情</a>';
	 			break;
	 		case 2:
	 			retbak='<a class="mr15" href="javascript:detail('+row.id+')">详情</a>';
	 			break;
	 		case 3:
	 			retbak='<a class="mr15" href="javascript:detail('+row.id+')">详情</a><a class="mr15" href="javascript:changeStatus('+row.id+',5)">还现</a>';
	 			break;
	 		case 4:
	 			retbak='<a class="mr15" href="javascript:detail('+row.id+')">详情</a><a class="mr15" href="javascript:changeStatus('+row.id+',5)">还现</a>';
	 			break;
	 		case 5:
	 			retbak='<a class="mr15" href="javascript:detail('+row.id+')">详情</a>';
	 			break;
	 		}
			return retbak;
		}
		
		function enable(){
			$("#repay_date").removeAttr("disabled"); 
		}
		
		function unable(){
			$("#repay_date").attr("disabled","disabled");
		}
		
		function statusFormatter(value, row, index){
			var statusName ="";
		    switch (value){
		    	case 0:
		    		statusName = "<span>待处理</span>";
		    	break;
		    	case 1:
		    		statusName = "<span class='label label-primary'>充值失败</span>";
		    	break;
		    	case 2:
		    		statusName = "<span class='label label-success'>充值成功</span>";
		    	break;
		    	case 3:
		    		statusName = "<span class='label label-warning'>充值成功</br>待还现</span>";
		    		break;
		    	case 4:
		    		statusName = "<span class='label label-danger'>充值成功</br>逾期</span>";
		    		break;
		    	case 5:
		    		statusName = "<span class='label label-success'>充值成功</br>已还现</span>";
		    	break;
		    }
			return statusName;
		}
// 		按新需求更改还现
		function changeStatus(id,status){
			 $("#modal4").modal("show");	
			 $(".btnAjax").on('click',function(){
			 var  repay_account = $("#repay_account") .val();
			 var  repay_name = $("#repay_name") .val();
			 var  repay_bank = $("#repay_bank") .val();
			 var  repay_bank_name = $("#repay_bank_name") .val();
			 var  repay_serial = $("#repay_serial") .val();
			 if(repay_account==""||repay_name==""||repay_bank==""||repay_bank_name==""||repay_serial==""){
				 alert("请填写必填项");
				 return ;
			 }
        		$.ajax({
             	   url: "${ctx}/account/repay.htm",
             	  type: 'POST',
                  data: {
                	  id:id,
                	  status:status,
                	  repay_account:repay_account,
                	  repay_name:repay_name,
                	  repay_bank:repay_bank,
                	  repay_bank_name:repay_bank_name,
                	  repay_serial:repay_serial,
                	  reason:"还现成功"
                  },
                    success: function (text) {
                    	bootstrapQ.msg({
 						    msg  : '操作成功！',
 						    type : 'success',
 						    time : 2000
 						});
                    	setTimeout("window.location.reload(true)",1000);
                    },
                    error: function () {
                    	bootstrapQ.msg({
 						    msg  : '操作失败！',
 						    type : 'danger',
 						    time : 2000
 						});
                    	setTimeout("window.location.reload(true)",1000);
                    }
                });
			},null);
		}
// 		function changeStatus(id,status){
// 			bootstrapQ.confirm('请确认客户已打款，进行还现操作后将不可逆转!',function(){
//         		$.ajax({
//              	   url: "${ctx}/account/repay.htm",
//              	  type: 'POST',
//                   data: {
//                 	  id:id,
//                 	  status:status,
//                 	  reason:"审核通过"
//                   },
//                     success: function (text) {
//                     	bootstrapQ.msg({
//  						    msg  : '操作成功！',
//  						    type : 'success',
//  						    time : 2000
//  						});
//                     	setTimeout("window.location.reload(true)",1000);
//                     },
//                     error: function () {
//                     	bootstrapQ.msg({
//  						    msg  : '操作失败！',
//  						    type : 'danger',
//  						    time : 2000
//  						});
//                     	setTimeout("window.location.reload(true)",1000);
//                     }
//                 });
// 			},null);
// 		}
	</script>
</body>
</html>